<template>
  <div class="footer">
    <div class="center">
      <ul>
        <li class="colortitle">
          <p>{{ $t("language.home.footer.footeritem1.title") }}</p>
          <div>
            <span @click="store.$patch({ turnTable: true })">{{ $t("language.home.footer.footeritem1.item1") }}</span>
            <span @click="store.$patch({ terouro: true })">{{ $t("language.home.footer.footeritem1.item2") }}</span>
            <span @click="">{{ $t("language.home.footer.footeritem1.item3") }}</span>
            <span @click="">{{ $t("language.home.footer.footeritem1.item4") }}</span>
            <span @click="">{{ $t("language.home.footer.footeritem1.item5") }}</span>
            <span @click="$openPage('/business')">{{ $t("language.home.footer.footeritem1.item6") }}</span>
            <span @click="store.$patch({task:true})">{{ $t("language.home.footer.footeritem1.item7") }}</span>
            <span @click="$openPage('/user/vip')">{{ $t("language.home.footer.footeritem1.item8") }}</span>
            <span @click="">{{ $t("language.home.footer.footeritem1.item9") }}</span>
            <span @click="$openPage('/download')">{{ $t("language.home.footer.footeritem1.item10") }}</span>
          </div>
        </li>
        <li class="colortitle">
          <p>{{ $t("language.home.footer.footeritem2.title") }}</p>
          <div>
            <span @click="$openPage('/user/vip')">{{ $t("language.home.footer.footeritem2.item1") }}</span>
            <span @click="$openPage('/activity')">{{ $t("language.home.footer.footeritem2.item2") }}</span>
          </div>
        </li>
        <li class="colortitle">
          <p>{{ $t("language.home.footer.footeritem3.title") }}</p>
          <div>
            <NuxtImg src="/img/c27.jpg" alt="" />
            <NuxtImg src="/img/c28.png" alt="" />
            <NuxtImg src="/img/c29.png" alt="" />

          </div>
        </li>
      </ul>


      <dl>
        <dd>
          <NuxtImg src="/img/1.png" alt="" />
          <NuxtImg src="/img/2.png" alt="" />
          <NuxtImg src="/img/3.png" alt="" />
          <NuxtImg src="/img/4.png" alt="" />
          <NuxtImg src="/img/5.png" alt="" />
          <NuxtImg src="/img/6.png" alt="" />
        </dd>
      </dl>
      <div class="bottomlogo">
        <div>
          <NuxtImg src="/img/world.png" alt="" />
          <p>{{ $t("language.home.footer.footertext") }}</p>
        </div>
        <p class="last">{{ $t("language.home.footer.version") }}</p>
      </div>
    </div>



    <!-- <div class="colortitle">
      <p>{{ $t("language.home.footer.footeritem1.title") }}</p>
      <div>
        <span>{{ $t("language.home.footer.footeritem1.item1") }}</span>
        <span>{{ $t("language.home.footer.footeritem1.item2") }}</span>
        <span>{{ $t("language.home.footer.footeritem1.item3") }}</span>
        <span>{{ $t("language.home.footer.footeritem1.item4") }}</span>
        <span>{{ $t("language.home.footer.footeritem1.item5") }}</span>
        <span>{{ $t("language.home.footer.footeritem1.item6") }}</span>
        <span>{{ $t("language.home.footer.footeritem1.item7") }}</span>
        <span>{{ $t("language.home.footer.footeritem1.item8") }}</span>
        <span>{{ $t("language.home.footer.footeritem1.item9") }}</span>
        <span>{{ $t("language.home.footer.footeritem1.item10") }}</span>
      </div>
    </div>
    <div class="colortitle">
      <p>{{ $t("language.home.footer.footeritem2.title") }}</p>
      <div>
        <span>{{ $t("language.home.footer.footeritem2.item1") }}</span>
        <span>{{ $t("language.home.footer.footeritem2.item2") }}</span>
      </div>
    </div>

    <div class="colortitle">
      <p style="margin-top: 20px;">{{ $t("language.home.footer.footeritem3.title") }}</p>
      <div>
        <img src="/img/c27.jpg" alt="" />
        <img src="/img/c28.png" alt="" />
        <img src="/img/c29.png" alt="" />
      </div>
    </div> -->
    <!-- <div class="bottomlogo">
      <img src="/img/world.png" alt="" />
      <p>{{ $t("language.home.footer.footertext") }}</p>
      <p class="last">{{ $t("language.home.footer.version") }}</p>
    </div> -->

  </div>
</template>

<script setup lang="ts">
import { shallowRef, onMounted } from "vue"
let loading = shallowRef<boolean>(true)
let store = useStore()
onMounted(() => {
  let time:null|any= null
  time = setTimeout(() => {
    loading.value = false
    clearTimeout(time)
  }, 1000)

})
</script>

<style scoped lang="scss">
.footer {
  width: 100%;
  min-height: 180px;
  padding: 50px 20px 40px;
  margin-top: 40px;
  background: #1a1c20;

  @media screen and (min-width:1500px) {
    .center {
      width: 1270px;
      margin: 0 auto;

    }
  }

  @media screen and (max-width:1500px) {
    .center {
      width: 92%;
      margin: 0 auto;

    }
  }

  .center {
    margin: 0 auto;


    ul {
      width: 100%;
      @include flex(row, flex-start, flex-start);

      .colortitle {
        @include flex(column, flex-start, flex-start);
        width: 300px;

        p {
          font-size: 20px;
          margin-top: 11px;
          color: #b5bac8;
          margin-bottom: 8px;
          font-weight: 600;
        }

        div {
          span {
            display: block;
            font-size: 14px;
            color: #b5bac8;
            cursor: pointer;
          }

          span {
            margin-right: 20px;
            padding: 8px 0;
          }

          img {
            width: 40px;
            height: 40px;
            margin: 8px 16px 0 0;
            border-radius: 5px;
            cursor: pointer;
          }
        }
      }
    }


    dl {
      width: 100%;
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
      padding: 15px 0;
      margin-top: 20px;

      dd {
        @include flex(row, center, center);
        flex-wrap: wrap;

        img {
          height: 40px;
          margin: 0 10px;
        }
      }
    }

    .bottomlogo {
      width: 100%;
      @include flex(column, flex-start, center);

      div {
        width: 100%;
        margin-top: 20px;
        @include flex(row, flex-start, center);

        img {
          width: 200px;
          margin-right: 25px;
        }

        p {
          color: #b5bacb;
          font-size: 18px;
          margin-top: 15px;
        }
      }

      .last {
        font-size: 12px;
        color: #b5bacb;
        margin-top: 15px;
      }
    }
  }
}
</style>
